<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>设备详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="${#request.getContextPath()}+'/static/layui/css/layui.css'" media="all">
    <link rel="stylesheet" th:href="${#request.getContextPath()}+'/static/css/thesame.css'" media="all">
    <link rel="stylesheet" th:href="${#request.getContextPath()}+'/static/css/rightCon.css'" media="all">
    <link rel="stylesheet" th:href="${#request.getContextPath()}+'/static/css/footer.css'" media="all">
    <style>
        .layui-form-checkbox[lay-skin=primary] span {
            padding-left: 30px;
            padding-right: 15px;
            line-height: 18px;
            background: 0 0;
            color: #323232;
        }

        .layui-transfer-header {
            background: rgba(15, 113, 226, 0.08);
            border-radius: 4px 4px 0px 0px;
            padding: 0 20px;
        }

        .layui-transfer-data {
            padding: 0 20px
        }

        .layui-transfer-active .layui-btn {
            background-color: #1D39C4;
        }

        .layui-transfer-active .layui-btn-disabled {
            /*background-color: #FBFBFB;
            border-color: #e6e6e6;*/
            color: #fff !important;
            background: linear-gradient(180deg, #A0CFFF 100%, #A0CFFF 100%);
            border-color: linear-gradient(180deg, #A0CFFF 100%, #A0CFFF 100%);
        }
    </style>
</head>

<body class="layui-layout-body layui-layout-body-scroll">
<div class="layui-body layui-body-bot">
    <!-- 内容主体区域 -->
    <div class="add-title"><span class="mr10px"><img th:src="${#request.getContextPath()}+'/static/img/icon_return.png'"></span><span>新建设备</span></div>
    <div class="scroll-box scroll-box-top scroll-box-bot bgWhite box-shadows border-radius1">
        <div class="scroll-box-padding">
            <div class="scroll-box-con">
                <article>
                    <input type="hidden" id="id" th:value="${device.id}"/>
                    <div class="add-title-border">设备管理：</div>
                    <div class="form-style form-box form-user-new form-add-select">
                        <div>
                            <div class="form-title">
                                <label><em class="red">*</em>设备名称：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="deviceName" th:value="${device.deviceName}" maxlength="20" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label><em class="red">*</em>安装位置/地址：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="address" th:value="${device.address}" maxlength="50" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>设备序列号：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="deviceUid" th:value="${device.deviceUid}" maxlength="32" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>设备型号：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="equipModel" th:value="${device.equipModel}" maxlength="20" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>固定资产编号：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="assetNum" th:value="${device.assetNum}" maxlength="20" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>内网IP地址：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="innerIp" th:value="${device.innerIp}" maxlength="15" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>设备负责人：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="manageUser" th:value="${device.manageUser}" maxlength="10" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                        <div>
                            <div class="form-title">
                                <label>联系方式：</label>
                            </div>
                            <div class="form-content">
                                <p>
                                    <input type="text" id="manageTel" th:value="${device.manageTel}" maxlength="20" placeholder="请输入">
                                </p>
                            </div>
                        </div>
                    </div>
                </article>
                <div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <div class="add-title-border mt20px">使用部门范围</div>
                    </fieldset>

                    <div id="test2" class="demo-transfer"></div>
                </div>
                <!-- <article>
                     <div class="add-title-border mt20px">使用用户范围</div>
                     <div class="use-con layui-form">
                         <div class="use-one border-radius4 border1px-ddd">
                             <h1><input type="checkbox" name="" lay-skin="primary" title="已选用户范围"></h1>
                             <nav class="use-list layui-form">
                                 <div>
                                     <ul id="org_list">

                                     </ul>
                                 </div>
                             </nav>
                         </div>
                         <div class="use-two">
                             <div>
                                 <p class="no-click"><img th:src="${#request.getContextPath()}+'/static/img/arrow_right.png'"></p>
                                 <p><img th:src="${#request.getContextPath()}+'/static/img/arrow_left.png'"></p>
                             </div>
                         </div>
                         <div class="use-three border-radius4 border1px-ddd">
                             <h1><input type="checkbox" name="" lay-skin="primary" title="可选用户范围"></h1>
                             <article class="use-list use-three-list layui-form">
                                 <nav>
                                     <p>
                                         <span class="use-arrow cursor"><img th:src="${#request.getContextPath()}+'/static/img/icon_select_right.png'"></span>
                                         <span class="mr5px"><input type="checkbox" name="" lay-skin="primary" title="用户"></span>
                                     </p>
                                     <ul id="org_all">

                                     </ul>
                                 </nav>
                             </article>
                         </div>
                     </div>
                 </article>-->
            </div>
        </div>
    </div>
</div>
<div class="layui-footer layui-footer-one">
    <div class="btn-con textCenter">
        <span class="btn-cancel">取&nbsp;消</span>
        <span class="btn-submit" lay-demotransferactive="getData">提&nbsp;交</span>
    </div>
</div>
<script th:src="${#request.getContextPath()}+'/static/js/jquery-3.1.1.min.js'"></script>
<script th:src="${#request.getContextPath()}+'/static/layui/layui.js'" charset="utf-8"></script>
<script th:src="${#request.getContextPath()}+'/static/js/tree.js'" charset="utf-8"></script>
<script th:inline="javascript">

    var basePath = [[${#request.getContextPath()}]];

    //左侧菜单栏
    layui.use(['element', 'form'], function () {
        var element = layui.element;
        var form = layui.form;
    });
    // 可选用户范围
    $(function () {
        $('.use-list p span.use-arrow').click(function () {
            $(this).parent().siblings().slideToggle(300);
            if ($(this).find('img').attr('src').indexOf("img/icon_select_right.png") > 0) {
                $(this).find('img').attr('src', getContextPath() + 'static/img/icon_select_down.png');
            } else {
                $(this).find('img').attr('src', getContextPath() + 'static/img/icon_select_right.png')
            }
        })
    })

    var selectDepts = [];

    var optionDepts = [];

    $(function () {
        //获取关联机构
        var deviceId = $("#id").val();
        $.ajax({
            url: "../device/orgList",
            type: "post",
            async: false,
            dataType: "json",
            data: {"id": deviceId},
            success: function (result) {
                console.info(result);
                if (result.code == 200) {
                    var html = "";
                    var all = "";
                    var ids = "";
                    var orgId = "";
                    if (result.oList && result.oList.length > 0) {
                        result.oList.forEach(function (v, i) {
                            ids += v.id + ",";
                            html += '<li><input type="checkbox" checked="true" id="' + v.orgId + '" name="choose" lay-skin="primary" title="' + v.orgName + '"></li>';
                        })
                        $("#org_list").html(html);
                    }
                    if (result.list && result.list.length > 0) {
                        result.list.forEach(function (m, n) {
                            orgId = m.id;
                            if (ids.lastIndexOf(orgId) > 0 && ids.substring(ids.lastIndexOf(orgId), ids.lastIndexOf(orgId) + 1) == ",") {
                                all += '<li><input type="checkbox" checked="true" id="' + m.id + '" name="all" lay-skin="primary" title="' + m.orgName + '"></li>';
                            } else {
                                all += '<li><input type="checkbox" id="' + m.id + '" name="all" lay-skin="primary" title="' + m.orgName + '"></li>';
                            }
                        })
                        $("#org_all").html(all);
                    }
                } else {
                    layer.msg(result.msg);
                }
            }
        })

        $(".btn-cancel").on('click', function () {
            window.history.back();
        })

        /* $(".btn-submit").on('click', function () {
             save();
         })*/

        //    加载当前可选部门
        loadOptionalOrg();

        //    加载当前已选部门
        loadSelectedOrg();
    });

    function save() {
        var deviceName = $("#deviceName").val();
        var address = $("#address").val();
        var deviceUid = $("#deviceUid").val();
        var equipModel = $("#equipModel").val();
        var assetNum = $("#assetNum").val();
        var innerIp = $("#innerIp").val();
        var manageUser = $("#manageUser").val();
        var manageTel = $("#manageTel").val();

        if (isNull(deviceName)) {
            layer.msg("请输入设备名称")
            return;
        }
        if (isNull(address)) {
            layer.msg("请输入安装位置")
            return;
        }

        if (isNull(deviceUid)) {
            layer.msg("请输入设备序列号")
            return;
        }

        var data = {
            deviceName: deviceName, address: address, deviceUid: deviceUid, equipModel: equipModel,
            assetNum: assetNum, innerIp: innerIp, manageUser: manageUser, manageTel: manageTel
        }
        $.ajax({
            url: "../device/save",
            type: "post",
            async: false,
            dataType: "json",
            data: data,
            success: function (result) {
                if (result.code == 200) {
                    layer.alert("保存成功", function () {
                        window.location.href = "../device/list";
                    })
                } else {
                    layer.msg(result.msg);
                }
            }
        })
    }

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }

    function loadOptionalOrg() {
        $.ajax({
            url: basePath + "/org/loadOptionalOrg",
            type: "get",
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    optionDepts = data.data.orgName;
                }
            }
        })
    }

    function loadSelectedOrg() {
        var data = {devId: $("#id").val()}
        $.ajax({
            url: basePath + "/org/loadSelectedOrg",
            type: "get",
            async: false,
            data: data,
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    if (data.data.length > 0) {
                        for (var i = 0; i < data.data.length; i++) {
                            selectDepts.push(data.data[i].orgId)
                        }
                    }
                }
            }
        })
    }

    //左侧菜单栏
    layui.use(['element', 'form', 'transfer', 'util'], function () {
        var element = layui.element;
        var form = layui.form;
        var transfer = layui.transfer
        var util = layui.util;


        //定义标题及数据源
        transfer.render({
            elem: '#test2'
            , title: ['可选机构范围', '已选机构']  //自定义标题
            , data: optionDepts
            , width: 360 //定义宽度
            , height: 370 //定义高度
            , value: selectDepts
            , id: 'key123'
            , parseData: function (res) {
                return {
                    "value": res.id //数据值
                    , "title": res.orgName //数据标题
                    // ,"disabled": res.disabled  //是否禁用
                    // ,"checked": res.checked //是否选中
                }
            }
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function (othis) {

                var deviceName = $("#deviceName").val();
                var address = $("#address").val();
                var deviceUid = $("#deviceUid").val();
                var equipModel = $("#equipModel").val();
                var assetNum = $("#assetNum").val();
                var innerIp = $("#innerIp").val();
                var manageUser = $("#manageUser").val();
                var manageTel = $("#manageTel").val();
                var devId = $("#id").val()


                if (isNull(deviceName)) {
                    layer.msg("请输入设备名称")
                    return;
                }
                if (isNull(address)) {
                    layer.msg("请输入安装位置")
                    return;
                }

                if (isNull(deviceUid)) {
                    layer.msg("请输入设备序列号")
                    return;
                }

                var getData = transfer.getData('key123'); //获取右侧数据
                // JSON.parse(JSON.stringify(getData));
                //O他妈的K
                // console.log(JSON.parse(JSON.stringify(getData)))
                var str = "";
                if (JSON.parse(JSON.stringify(getData)).length > 0) {
                    for (var i = 0; i < JSON.parse(JSON.stringify(getData)).length; i++) {
                        str += JSON.parse(JSON.stringify(getData))[i].value + ","
                    }
                }
                var data = {
                    deviceName: deviceName, address: address, deviceUid: deviceUid, equipModel: equipModel,
                    assetNum: assetNum, innerIp: innerIp, manageUser: manageUser, manageTel: manageTel
                    , ids: str.slice(0, str.length - 1), id: devId
                }
                layer.confirm('确认要提交吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    layer.closeAll();
                    $.ajax({
                        url: "../device/update",
                        type: "post",
                        async: false,
                        dataType: "json",
                        data: data,
                        success: function (data) {
                            if (data.code == 200) {
                                layer.alert(data.msg, function () {
                                    window.location.href = "../device/list"
                                })
                            } else {
                                layer.msg(data.msg);
                            }
                        }
                    })
                });
            }
        });
    });


</script>
</body>

</html>
